<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #d1{
            width: 100%;
            height: 100%;
            background: rgba(105,105,105,0.5);
            z-indent: 100;
            position: fixed;
        }
        #d2{
            width: 250px;
            height: 100px;
            background: white;
            z-indent: 101;
            position:fixed;
            left: 50%;
            top: 50%;
            margin-left: -125px;
            margin-top: -50px;
        }
        .dip{
           display: none;
        }
    </style>
</head>
<body>
<div id="d1" class="dip"></div>
<div id="d2" class="dip">
    <label>姓名：<input type="text" id="i1"></label>
    <br>
    <label>爱好：<input type="text" id="i2"></label>
    <br>
    <input type="button" value="取消">
    <input type="button" value="提交">
    <input type="button" value="保存" class="dip">
</div>
<input type="button" value="新增">
<table border="2px">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>爱好</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td class="t1">金老板</td>
            <td class="t2">开车</td>
            <td><input type="button" value="开除"><input type="button" value="编辑"></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td class="t1">景女神</td>
            <td class="t2">茶道</td>
            <td><input type="button" value="开除"><input type="button" value="编辑"></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td class="t1">宛昊（宛局）</td>
            <td class="t2">不洗头、不翻车、不要脸</td>
            <td><input type="button" value="开除"><input type="button" value="编辑"></td>
        </tr>
    </tbody>
</table>
<script src="jquery.js"></script>
<script>
    var user;
    $("[value='新增']").click(function(){
        $("[value='提交']").removeClass("dip");
        $("[value='保存']").addClass("dip");
        $("#d1,#d2").removeClass("dip");
        $("#i1").val("");
        $("#i2").val("");
    })
    $("[value='取消'],#d1").click(function(){
        $("#d1,#d2").addClass("dip");
    })
    $("table").on('click',"[value='开除']",function(){
        $(this).parent().parent().remove();
    })
    $("[value='提交']").click(function(){
        $("tbody").append('<tr><td><input type="checkbox"></td><td class="t1">'+$("#i1").val()+'</td><td class="t2">'+$("#i2").val()+'</td><td><input type="button" value="开除"><input type="button" value="编辑"></td></tr>')
        $("#d1,#d2").addClass("dip");
    })

    $("table").on('click',"[value='编辑']",function(){
        user = $(this);
        $("[value='保存']").removeClass("dip");
        $("[value='提交']").addClass("dip");
        $("#d1,#d2").removeClass("dip");
        var name = $(this).parent().siblings(".t1").text();
        var hobby= $(this).parent().siblings(".t2").text();
        $("#i1").val(name);
        $("#i2").val(hobby);
        $("[value='保存']").click(function(){
            user.parent().siblings(".t1").text($("#i1").val());
            user.parent().siblings(".t2").text($("#i2").val());
            $("#d1,#d2").addClass("dip");
        })
    })

</script>
<!--        $(this).parent().parent().remove();-->


</body>
</html>